<template>
<div class="layout">
    <Layout>
        <Header  class="headerInfo">
       
               <Row type="flex">
                    <i-col span="12">
                        <span>选择视图名称：</span>
                        <i-select style="width:200px" @on-change="showView" v-model="modelId">
                            <i-option v-for="item in modelList" :key='item.id' :value="item.id">
                                {{ item.name }}
                            </i-option>
                        </i-select>
                    </i-col>
                    <i-col span="12" class="viewToRight">
                        <Button type="primary" @click="keep=true">
                            <Icon type="md-checkbox-outline" />保存
                        </Button>
                        <Modal v-model="keep" @on-ok="keepViewOk">
                            <div slot="header" style="fontSize:14px;fontWeight:bold">
                                <span>保存视图</span>
                            </div>
                            <div class="center warningInfo">
                                <Icon type="ios-alert" class="warnIcon"/>确认保存该视图吗
                            </div>
                        </Modal>
                    </i-col>
               </Row>
        </Header>
        <Layout>
        <Content>
            <i-table
                border
                stripe
                content="self"
                :columns="columns"
                :data="tableData"
                size="large"
            />
        </Content>
        <Sider hide-trigger :style="{background: '#fff'}">
           <Divider><span style="font-size:13px;font-weight:bold">删除字段</span></Divider>
            <ButtonGroup size="large" >
                <Button size="large" style="margin:5px 5px 0 20px"  v-for="deleteItem in deleteList" :key="deleteItem.id" :value="deleteItem" @click="()=>{addBack(deleteItem)}">
                    {{deleteItem.fieldName}}
                </Button>
            </ButtonGroup>
  
        </Sider>
        </Layout>
    </Layout>
</div>
</template>
<script>
export default {
    data(){
        return{
            /**keep绑定保存视图的弹窗 */
            keep:false,
            /**modelId绑定选中模块的id，默认选中序号为1的块 */
            modelId:1,
            /**
             * 后端传来的modelList
             * [
                {
                    "id": 1,
                    "name": "招投标管理"
                },
                {
                    "id": 2,
                    "name": "项目承接"
                },
                ]
             */
            modelList:[],
            /**
             * 后端传来的数据
             *  {
                    "modelId": 1,
                    "modelName": "招投标管理",
                    "fieldId": 1,
                    "fieldName": "项目名称",
                    "number": 1,
                    "key": "name"
                },
             */
            columns:[
                {
                    type:'index',
                    title:'序号',
                    key:'number',
                    width:80
                },
                {
                    title:'名称',
                    key:'fieldName'
                },
                {
                    title:'操作',
                    key:'action',
                    render: (h, params) => {
                        return h('div',[
                            h('Icon',{
                                props:{
                                    type:'md-arrow-round-up'
                                },
                                style:{
                                    fontSize:'20px',
                                    margin:'0 20px 0 0',
                                    cursor:'pointer'
                                },
                                on:{
                                    click:()=>{this.up(params.index)}
                                }
                            }),
                            h('Icon',{
                                props:{
                                    type:'md-arrow-round-down'
                                },
                                style:{
                                    fontSize:'20px',
                                    margin:'0 20px 0 0',
                                    cursor:'pointer'
                                },
                                on:{
                                    click:()=>{this.down(params.index)}
                                }
                            }),
                            h('Icon',{
                                props:{
                                    type:'ios-trash'
                                },
                                style:{
                                    fontSize:'20px',
                                    color:'#f16e8d',
                                    cursor:'pointer'
                                },
                                on:{
                                    click:()=>{this.bandon(params.row,params.index)}
                                }
                            })
                        ]);
                    }
                }
            ],
            /**tableData里存放表中数据 */
            tableData:[],
            /**submitTableData里存放更新视图时传给后端的数据，里面只含id */
            submitTableData:[],
            /**deleteItem绑定点击的按钮(即删除字段) */
            deleteItem:'',
            /**deleteList里面存放删除的字段 */
            deleteList:[
                {
                    id:1,
                    name:'233'
                },
                {
                    id:2,
                    name:'all'
                },
                {
                    id:3,
                    name:'haha'
                },
                {
                    id:4,
                    name:'massami'
                }
            ]
        }
    },
    beforeMount(){
        this.getModelIndex();
        this.modelId=1;
        this.getViewByModel();
    },
    methods:{
        /**实现字段上移的方法 */
        up(index){
            var i=0;
            var length=this.tableData.length;
            var tempName,tempId;
            if(index==0){
                    tempName=this.tableData[index].fieldName;
                    tempId=this.tableData[index].fieldId;
                    this.tableData[index].fieldName=this.tableData[length-1].fieldName;
                    this.tableData[index].fieldId=this.tableData[length-1].fieldId;
                    this.tableData[length-1].fieldName=tempName;
                    this.tableData[length-1].fieldId=tempId;
            }else{
                tempName=this.tableData[index].fieldName;
                tempId=this.tableData[index].fieldId;
                this.tableData[index].fieldName=this.tableData[index-1].fieldName;
                this.tableData[index].fieldId=this.tableData[index-1].fieldId;
                this.tableData[index-1].fieldName=tempName;
                this.tableData[index-1].fieldId=tempId;
            }
        },
        /**实现字段下移的方法 */
        down(index){
            var i=0;
            var length=this.tableData.length;
            var tempName,tempId;
            if(index==(length-1)){
                //最后一个字段下移：最后一个字段和第一个字段交换位置
        
                    tempName=this.tableData[index].fieldName;
                    tempId=this.tableData[index].fieldId;
                    this.tableData[index].fieldName=this.tableData[0].fieldName;
                    this.tableData[index].fieldId=this.tableData[0].fieldId;
                    this.tableData[0].fieldName=tempName;
                    this.tableData[0].fieldId=tempId;
            }else{
                //其他情况：该字段和下面一个字段交换位置
           
                tempName=this.tableData[index].fieldName;
                tempId=this.tableData[index].fieldId;
                this.tableData[index].fieldName=this.tableData[index+1].fieldName;
                this.tableData[index].fieldId=this.tableData[index+1].fieldId;
                this.tableData[index+1].fieldName=tempName;
                this.tableData[index+1].fieldId=tempId;
            }
        },
        /**实现废弃这个字段的方法 */
        bandon(row,index){
            this.tableData.splice(index,1);
            this.deleteList.push(row);
        },
        /**实现将废弃字段重新加入的方法 */
        addBack(item){
            this.tableData.push(item);
            var i=0,index=0;
            for(i=0;i<this.deleteList.length;i++){
                if(item.fieldId==this.deleteList[i].fieldId){
                    index=i;
                    break;
                }
            }
            this.deleteList.splice(i,1);
        },
        /**获取对应模块的视图的方法 */
        getViewByModel(){
            this.apis.viewApis.getView(this.modelId,res=>{
                var code=res.code;
                if(code===0){
                    this.tableData=res.data.usingViews;
                    this.deleteList=res.data.invisibleViews;
                }else{
                    this.$Message.error(res.msg);
                }
            })
        },
        /**获取模块索引的方法 */
        getModelIndex(){
            this.apis.viewApis.getModelIndexes(res=>{
                var code=res.code;
                if(code===0){
                    this.modelList=res.data;
                }else{
                    this.$Message.error(res.msg);
                }
            })
        },
        /**选择不同模块显示不同view的方法 */
        showView(){
            this.getViewByModel();
        },
        /** 点击确保保存时的回调，给submitTableData赋值*/
        keepViewOk(){
            //首先清空原来的值
            this.submitTableData=[];
            var i=0;
            for(i=0;i<this.tableData.length;i++){
                this.submitTableData.push(this.tableData[i].fieldId);
            };
            this.submitKeepView();
        },
        /**点击确认保存时，提交更新视图时候的请求 */
        submitKeepView(){
            
           this.apis.viewApis.updateView(this.modelId,this.submitTableData,res=>{
                var code=res.code;
                if(code===0){
                    this.$Message.success(res.data);
                    this.getViewByModel();
                }else{
                    this.$Message.error(res.msg);
                };
           })
        }
    }
}
</script>
<style>
@import "../../../static/global.css"; /*引入公共样式*/
.viewToRight{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
</style>

